<template>
  <view class="">
    <view class="top">
      <view class="logok">
        <view class="imgOut" :style="{'background':'url(' + avatarUrl + ')','background-size':'80px'}">
          <!-- <cover-image mode="aspectFill" :src='avatarUrl'></cover-image> -->
        </view>
        <view v-if="nickName" class="userName" :style="{'font-size':size + 'px;'}">{{userName}}</view>
        <view v-else class="userName">
          <!-- <button @tap="login(),authorization()">登录</button> -->
          <u-button type="warning" v-if="canIUseGetUserProfile" @click="authorization()"> 登录 </u-button>
          <u-button type="warning" v-else open-type="getUserInfo" @getuserinfo="authorization"> 登录 </u-button>
        </view>
      </view>
    </view>
<!--    <view class="lists list_1">
    	<u-cell-item icon="setting-fill" title="我的草稿" @click="go('/pages/mytext/mytext','我的草稿')"></u-cell-item>
		<u-cell-item icon="setting-fill" title="我的投递" @click="go('/pages/mytext/mytext','我的投递')"></u-cell-item>
    </view> -->
    <view class="lists list_2">
      <u-cell-group>
          <u-cell-item icon="car" title="我的投递" @click="go('/pages/mytext/mytext','我的投递')"></u-cell-item>
          <u-cell-item icon="server-man" title="关于我们" @click="notice"></u-cell-item>
          <u-cell-item icon="server-fill" title="意见反馈" @click="notice"></u-cell-item>
          <u-cell-item icon="setting-fill" title="组织管理" @click="open"></u-cell-item>
      </u-cell-group>
    </view>
    <u-modal
      v-model="modal"
      :async-close="false"
      :show-cancel-button="true"
      @confirm="loginOrg"
      @cancel="reSet"
    >
      <view class="slot-content">
        <u-form :model="model" ref="uForm" :rules="rules" :errorType="errorType" :label-width="85">
          <view class="field">
            <u-form-item
              label="帐号"
              label-align="right"
              prop="accout"
              :border-bottom="false"
              :required="true"
            >
              <u-input
                v-model="model.accout"
                :border="true"
              />
            </u-form-item>
            <u-form-item
              label="密码"
              label-align="right"
              prop="passwd"
              :border-bottom="false"
              :required="true"
            >
              <u-input
                v-model="model.passwd"
                :border="true"
                type="password"
                :password-icon="true"
              />
            </u-form-item>
          </view>
        </u-form>
         <!-- <u-field
            label="账号"
            label-align="center"
            placeholder="请填写组织账号"
            maxlength="20"
            :border-bottom="false"
          />
          <u-field
            v-model="passwd"
            label="密码"
            label-align="center"
            placeholder="请输入密码"
            :password="true"
            :border-bottom="false"
          /> -->
      </view>
    </u-modal>
  </view>
</template>
<script>
  export default {
    data() {
      return{
        class_one: 1,
        userInfo: {},
        canIUseGetUserProfile: false,
        nickName: false,
        userName: '',
        size: 30,
        avatarUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132',
        modal: false,
        model: {
          accout: '',
          passwd: '',
        },
        rules: {
          accout: [
            {
              required: true,
              message: "请填写组织账号",
              trigger: ['change','blur']
            },
          ],
          passwd: [
            {
              required: true,
              message: "请输入密码",
              trigger: ['change','blur']
            }
          ],
        },
        errorType: ['message'],
        // custom: {
        //   accout: {
        //     padding: '0 0 0 10rpx',
        //     borderLeft: 'solid 2rpx #C0C4CC'
        //   },
        //   passwd: {
        //     padding: '0 0 0 10rpx',
        //     borderLeft: 'solid 2rpx #C0C4CC'
        //   },
        // }
      }
    },
    onLoad(openid) {
      this.token()
      this.class_one = openid.class_one
    },
    onReady() {
    },
    mounted() {
    },
    methods: {
      notice() {
        uni.showToast({
          title: '该功能尚在开发',
          icon: 'none'
        })
      },
      // 为表单添加验证规则
      open() {
        // this.go('/pages/manageorg/manageorg','0&class_one=0')
        this.modal = true;
        this.$nextTick(() => {
          this.$refs.uForm.setRules(this.rules);
        }) 
      },
      // 组织登录
      loginOrg(){
        let accout = this.model.accout
        let passwd = this.model.passwd
        this.$refs.uForm.validate(valid => {
          if (valid) {
            console.log('验证通过');
            this.$request({
              url: '/loginorg',
              method: 'POST',
              data: {
                accout: accout,
                password: passwd
              },
              header: {
                'content-type': 'application/x-www-form-urlencoded',
              }
            }).then((res) => {
              if (res.code == 200) {
                // let class_one = res.data.class_one
                let class_one = res.data.类别
                uni.setStorageSync('org_token', res.data.token)
                this.modal = false;
                this.go('/pages/manageorg/manageorg','&class_one='+class_one)
              } else {
                console.log(res)
                this.modal = true
              }
            })
          } else {
            console.log('验证失败');
            this.modal = true
            uni.showToast({
              title: '信息尚未填写正确',
              icon: 'none'
            })
          }
        })
      },
      // 清空表单
      reSet() {
        this.$refs.uForm.resetFields()
      },
      go(url, title) {
        console.log(url)
        uni.navigateTo({
          url: url+'?title='+title
        })
      },
      // 用户授权
      token() {
        if (uni.getUserProfile) {
          this.canIUseGetUserProfile = true
        }
        if (uni.getStorageSync('nickName')) {
          this.nickName = true
          this.userName = uni.getStorageSync('nickName')
          if (this.nickName.length >= 8) {
            this.size = 16
          }
          this.avatarUrl = uni.getStorageSync('avatarUrl')
          // 登录接口对完后用
          this.login()
        }
      },
      // 用户登录
      login() {
        var that = this;
        var provider = uni.getStorageSync('provider')
        uni.login({
          provider: provider,
          success: function(reason) {
            // console.log(JSON.stringify(reason));
            if (reason.code) {
              console.log(reason.code)
              // 登录接口成功，开始发送请求
              that.$request({
                url: '/user/bind',
                method: 'POST',
                data: {
                  code: reason.code,
                },
                header: {
                  'content-type': 'application/x-www-form-urlencoded',
                }
              }).then((res) => {
                if (res.code == 200) {
                  uni.setStorage({
                    data: res.data,
                    key: 'token',
                    success: (reason) => {
                      console.log('token获取成功')
                      uni.showToast({
                        title: '登陆成功'
                      })
                    },
                    fail: (res) => {
                      console.log(res)
                      uni.showModal({
                        confirmColor: 'confirmColor',
                        confirmText: '确认',
                        content: '登录失败，请重新进入小程序',
                        showCancel: false,
                        title: '提示',
                        complete() {
                          that.nickName = false
                          uni.removeStorage('nickName', 'avatarUrl')
                        }
                      })
                    },
                  })
                } else {
                  uni.showModal({
                    confirmColor: 'confirmColor',
                    confirmText: '确认',
                    content: '服务器无响应，请重新进入小程序',
                    showCancel: false,
                    title: '提示',
                    complete() {
                      that.nickName = false
                      uni.removeStorage('nickName', 'avatarUrl')
                    }
                  })
                }
              }).catch((res) => {
                console.log(res)
                uni.showModal({
                  confirmColor: 'confirmColor',
                  confirmText: '确认',
                  content: '网络连接出现问题，请重新登录',
                  showCancel: false,
                  title: '提示',
                  complete() {
                    that.nickName = false
                    uni.removeStorage('nickName', 'avatarUrl')
                  }
                })
              })
            }
          }
        });
      },
      // 授权弹窗
      authorization() {
        var that = this;
        if(that.canIUseGetUserProfile){
          uni.getUserProfile({
            desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
            success: (res) => {
              // that.getUserInfo({detail:res})
              console.log(res)
              console.log('用户昵称为：' + res.userInfo.nickName)
              that.nickName = true
              that.userName = res.userInfo.nickName
              that.avatarUrl = res.userInfo.avatarUrl
              uni.setStorage({
                key: 'nickName',
                data: res.userInfo.nickName,
              })
              uni.setStorage({
                key: 'avatarUrl',
                data: res.userInfo.avatarUrl,
              })
              // 同上
              that.login()
            }
          })
        } else {
          uni.getUserInfo({
            provider: 'weixin',
            success: (res) => {
              console.log('用户昵称为：' + res.userInfo.nickName)
              that.nickName = true
              that.userName = res.userInfo.nickName
              that.avatarUrl = res.userInfo.avatarUrl
              uni.setStorage({
                key: 'nickName',
                data: res.userInfo.nickName,
              })
              uni.setStorage({
                key: 'avatarUrl',
                data: res.userInfo.avatarUrl,
              })
              // 一般不会触发，就不注释了
              that.login()
            }
          })
        }
      },
    }
  }
</script>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .top{
    height: 110px;
    background-color: #fc9;
    background: url('https://hd.jxj777.top/usr/img/bj3.jpg');
    background-size: 100% 110px;
  }
  .logok{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 100%;
    
  }
  .top .imgOut{
    margin-left: 35px;
    height: 80px;
    width: 80px;
    /* border: solid 5rpx #ff9900; */
    border-radius: 25rpx;
  }
  /* .top .imgOut cover-image{
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    min-height: 100%;
    min-width: 100%;
  } */
  .top button{
    /* border-radius: 0; */
    margin-left: 30px;
    color: #606266;
    /* background-color: #ffe6cc; */
  }
  .top .userName{
    width: 50%;
    font-weight: bolder;
    text-align: center;
  }
  .lists{
	  padding: 40rpx;
	  margin-top: 50rpx;
  }
  .list_1{
	  border-radius: 10rpx;
	  margin: 10rpx;
	  -webkit-box-shadow:0px 3px 3px #c8c8c8 ;
	  -moz-box-shadow:0px 3px 3px #c8c8c8 ;
	  box-shadow:0px 0px 3px #c8c8c8 ;
  }
  .list_2{
	  border-radius: 10rpx;
	  margin: 10rpx;

	  -webkit-box-shadow:0px 3px 3px #c8c8c8 ;
	  -moz-box-shadow:0px 3px 3px #c8c8c8 ;
	  box-shadow:0px 0px 3px #c8c8c8 ;
  }
  .field{
    padding-right: 30rpx;
  }
</style>
